<script setup lang="ts" name="appConfigDrawer">
import { useAppConfigStore, useAppConfigUserStore } from '@/stores'
import { useI18n } from 'vue-i18n'
import { Sunny, Moon, ColdDrink, Setting } from '@element-plus/icons-vue'
import ChangeLayout from './changeLayout.vue'
const appConfigStore = useAppConfigStore()
const appConfigUserStore = useAppConfigUserStore()
const i18 = useI18n()
</script>

<template>
  <el-drawer v-model="appConfigStore.appConfigDrawerVisible" size="18em">
    <template #header>
      <h4>{{ i18.t('settings.appConfigDrawer.title') }}</h4>
    </template>

    <template #default>
      <ChangeLayout></ChangeLayout>
      <!-- 全局主题 -->
      <el-divider class="divider" content-position="center">
        <el-icon><ColdDrink /></el-icon>
        {{ i18.t('settings.appConfigDrawer.themeConfig.name') }}
      </el-divider>
      <div class="theme-item">
        <span>{{
          i18.t('settings.appConfigDrawer.themeConfig.primaryColor')
        }}</span>
        <el-color-picker
          v-model="appConfigUserStore.themeConfig.primaryColor"
          @change="appConfigUserStore.changePrimary"
        />
      </div>
      <div class="theme-item">
        <span>{{ i18.t('settings.appConfigDrawer.themeConfig.dark') }}</span>
        <el-switch
          v-model="appConfigUserStore.themeConfig.isDark"
          @change="appConfigUserStore.switchDark"
          inline-prompt
          active-color="#0a0a0a"
          inactive-color="#dcdfe6"
          :active-icon="Sunny"
          :inactive-icon="Moon"
        />
      </div>
      <div class="theme-item">
        <span>{{ i18.t('settings.appConfigDrawer.themeConfig.grey') }}</span>
        <el-switch
          v-model="appConfigUserStore.themeConfig.isGrey"
          @change="appConfigUserStore.changeGreyOrWeak($event, 'grey')"
        />
      </div>
      <div class="theme-item">
        <span>{{ i18.t('settings.appConfigDrawer.themeConfig.weak') }}</span>
        <el-switch
          v-model="appConfigUserStore.themeConfig.isWeak"
          @change="appConfigUserStore.changeGreyOrWeak($event, 'weak')"
        />
      </div>
      <br />

      <!-- 界面设置 -->
      <el-divider class="divider" content-position="center">
        <el-icon><Setting /></el-icon>
        {{ i18.t('settings.appConfigDrawer.layoutConfig.name') }}
      </el-divider>
      <div class="theme-item">
        <span>{{
          i18.t('settings.appConfigDrawer.layoutConfig.collapseMenu')
        }}</span>
        <el-switch v-model="appConfigUserStore.layoutConfig.collapseSideMenu" />
      </div>
      <div class="theme-item">
        <span>{{
          i18.t('settings.appConfigDrawer.layoutConfig.breadcrumb')
        }}</span>
        <el-switch v-model="appConfigUserStore.layoutConfig.showBreadcrumb" />
      </div>
      <div class="theme-item">
        <span>{{
          i18.t('settings.appConfigDrawer.layoutConfig.breadcrumbIcon')
        }}</span>
        <el-switch
          v-model="appConfigUserStore.layoutConfig.showBreadcrumbIcon"
        />
      </div>
      <div class="theme-item">
        <span>{{ i18.t('settings.appConfigDrawer.layoutConfig.tabs') }}</span>
        <el-switch v-model="appConfigUserStore.layoutConfig.showTabs" />
      </div>
      <div class="theme-item">
        <span>{{
          i18.t('settings.appConfigDrawer.layoutConfig.tabsIcon')
        }}</span>
        <el-switch v-model="appConfigUserStore.layoutConfig.showTabsIcon" />
      </div>
    </template>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="appConfigUserStore.resetStore()">{{
          i18.t('settings.appConfigDrawer.button.reset')
        }}</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped>
.theme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0;
  span {
    font-size: 14px;
  }
}
</style>
